<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
</head>
<body>

<div id="view"></div>
<div id="page"></div>

<script id="demo" type="text/html">

    <ul>
        {{#  layui.each(d, function(index, item){ }}
        <li>
            <span>{{ item.modname }}：</span>
            <span>{{ item.alias }}</span>
        </li>
        {{#  }); }}
        {{#  if(d.length === 0){ }}
        无数据
        {{#  } }}
    </ul>
</script>

<script src="../layui/layui.js"></script>
<script>

    layui.use(['laypage','jquery','laytpl'],function () {

        var laypage = layui.laypage
            ,$ = layui.jquery
            ,laytpl = layui.laytpl;

        //第三步：渲染模版
        var data = { //数据
            "list":[
                {"modname":"表单1","alias":"form"}
                ,{"modname":"表单2","alias":"form"}
                ,{"modname":"表单3","alias":"form"}
                ,{"modname":"表单4","alias":"form"}
                ,{"modname":"表单5","alias":"form"}
                ,{"modname":"表单6","alias":"form"}
                ,{"modname":"表单7","alias":"form"}
                ,{"modname":"表单8","alias":"form"}
                ,{"modname":"表单9","alias":"form"}
                ,{"modname":"表单10","alias":"form"}
                ,{"modname":"表单11","alias":"form"}
                ,{"modname":"表单12","alias":"form"}
                ,{"modname":"表单13","alias":"form"}
            ]
        };

        //调用分页
        laypage.render({
            elem: 'page'
            ,count: data.list.length
            ,jump: function(obj){
                $("#view").html(function () {
                    var thisData = data.list.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                    //模板
                    laytpl($("#demo").html()).render(thisData, function (html) {
                        $("#view").html(html);
                    });

                })
            }
        });



    });
</script>
</body>
</html>